<template>
  <div class="EmergencyList-form">
    <div class="EmergencyList-dialog-form-item">
      <el-form-item v-for="(item, index) in formConfig.formData" :key="index" :class="item.class" :prop="item.prop" :label-width="item.lableWidth ? item.lableWidth : '150px'" :label="item.label ? item.label + '：' : ''">
        <!-- 输入框 -->
        <div :class="isDisabled(item) ? 'input_readonly' : ''" v-if="['input', 'textarea'].includes(item.type)">
          <div v-if="isDisabled(item)">{{form[item.prop]}}</div>
          <el-input v-else style="color: #3270ff;" :readonly="isDisabled(item) ? true: false" :type="isDisabled(item) ? 'input': item.type" :placeholder="item.placeholder ? item.placeholder : isDisabled(item) ? '' : '请输入'" resize="none" v-model="form[item.prop]">
          </el-input>
        </div>
        <!-- 下拉框 -->
        <div v-if="item.type === 'select'" :class="isDisabled(item) ? 'input_readonly' : ''">
          <el-input v-if="isDisabled(item)" type="text" readonly :placeholder="item.placeholder ? item.placeholder : isDisabled(item) ? '' : '请输入'" resize="none" v-model="form[item.name]">
          </el-input>
          <el-select @remove-tag="removeTag" v-else :filterable="item.filterable? item.filterable: false" v-model="form[item.prop]" :placeholder="item.placeholder ? item.placeholder : isDisabled(item) ? '' : '请选择'" clearable @change="((val) => { changeEvent(val, item) })" :multiple="item.multiple ? item.multiple : false">
            <el-option v-for="(item, index) in item.options" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <!-- 时间选择框 单选 -->
        <div v-if="item.type === 'dataPicker' && item.dateType === 'datetime'" :class="isDisabled(item) ? 'input_readonly' : ''">
          <el-input v-if="isDisabled(item)" type="text" readonly :placeholder="item.placeholder ? item.placeholder : isDisabled(item) ? '' : '请输入'" resize="none" v-model="form[item.prop]">
          </el-input>
          <el-date-picker v-else type="datetime" placeholder="请选择" :picker-options="startPickerOptions" value-format=" yyyy-MM-dd HH:mm:ss" clearable v-model="form[item.prop]" :disabled="isDisabled(item)" style="width: 100%">
          </el-date-picker>
        </div>
        <!-- 时间选择框 双选 -->
        <div v-if="item.type === 'dataPicker' && item.dateType === 'datetimerange'" :class="isDisabled(item) ? 'input_readonly' : ''">
          <div v-if="isDisabled(item)" class="flex timeBox">
            <el-input type="text" readonly :placeholder="item.placeholder ? item.placeholder : isDisabled(item) ? '' : '请输入'" resize="none" v-model="form[item.start]" />
            <span style="margin:0 5px">至</span>
            <el-input type="text" readonly :placeholder="item.placeholder ? item.placeholder : isDisabled(item) ? '' : '请输入'" resize="none" v-model="form[item.end]" />
          </div>
          <div class="flex" v-else>
            <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" v-model="form[item.start]" :editable=false :picker-options="startPickerOptions" :placeholder="item.placeholder ? item.placeholder : isDisabled(item) ? '' : '选择日期'" @change="(val) => { pickerChange(val,item,1)}">
            </el-date-picker>
            <span style="margin:0 5px">至</span>
            <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" v-model="form[item.end]" :editable=false :picker-options="endPickerOptions" :placeholder="item.placeholder ? item.placeholder : isDisabled(item) ? '' : '选择日期'" @change="(val) => { pickerChange(val,item,2)}">
            </el-date-picker>
          </div>
          <!-- <el-date-picker v-else :picker-options="pickerOptions" @change="pickerChange" v-model="form[item.prop]" value-format="yyyy-MM-dd HH:mm:ss" :disabled="isDisabled(item)" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> -->
        </div>
        <el-radio-group v-model="form[item.prop]" @change="change" v-if="item.type === 'radio'">
          <el-radio v-for="(i, j) in item.radio" :key="j" :label="i.value">{{ i.label }}</el-radio>
        </el-radio-group>
        <el-input-number v-else-if="item.type === 'inputNumber'" controls-position="right" type="number" :min="item.min ? item.min : 1" :max="item.max ? item.max : 99" placeholder="请输入" resize="none" v-model="form[item.prop]" :disabled="isDisabled(item)">
        </el-input-number>
        <el-button v-else-if="item.type === 'button'" type="primary" size="mini" style="width:220px;font-size:14px" @click="getResourcesData(name, 1)">
          {{ item.btnName }}
        </el-button>
        <el-button v-else-if="item.type === 'btnInput'" type="text" size="small" class="TeamChoose" @click="getResourcesData(name, 1)" :disabled="isDisabled(item)">
          {{ item.value ? item.value : '点击选择' }}
        </el-button>
        <div class="inputAndbtn" v-else-if="item.type === 'inputAndbtn'">
          <el-input type="text" :value="item.value" size="small" v-model="form[item.prop]" style="width:120px" :disabled="isDisabled(item)">
          </el-input>
          <el-button size="mini" type="primary" style="width:100px;font-size:14px" @click="getResourcesData(name, 2)">
            {{ item.btnName }}</el-button>
        </div>
        <el-upload v-if="item.type === 'upload'" class="upload-demo" :http-request="item.httpRequest" :action="item.action" :disabled="isDisabled(item)" :on-preview="handlePreview" :on-success="handleupdata" :on-change="handleChange" :before-upload="handleBeforeUpload" multiple :limit="item.limit" :file-list="fileList">
          <el-button size="mini" style="color: #3270ff">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            支持jpg/png/pdf/doc等文件，且不超过50mb
          </div>
        </el-upload>
        <div v-if="item.type === 'cascader'" :class="isDisabled(item) ? 'input_readonly' : ''">
          <el-input v-if="isDisabled(item)" type="text" readonly :placeholder="item.placeholder ? item.placeholder : isDisabled(item) ? '' : '请输入'" resize="none" v-model="form[item.name]">
          </el-input>
          <el-cascader v-else :show-all-levels="item.showAll ? item.showAll : false" :clearable="item.clearable" checkStrictly :props="item.props" v-model="form[item.prop]" :options="item.options" @change="((val) => { handleCascaderChange(val, item) })" :disabled="isDisabled(item)">
          </el-cascader>
        </div>
        <div v-if="item.type === 'selectTree'" :class="item.isDisabled ? 'input_readonly' : ''">
          <div v-if="isDisabled(item)">{{form[item.prop]}}</div>
          <el-select v-else :ref="item.ref" :popper-append-to-body="false" @clear="clearValue('selectTree',item)" @remove-tag="removeTag" v-model="form[item.prop]" :placeholder="item.placeholder ? item.placeholder : item.isDisabled ? '' : '请选择'" clearable @change="((val) => { changeEvent(val, item) })" :multiple="item.multiple ? item.multiple : false" :class="item.multiple?'':'el-input__innerHeight'">
            <el-option disabled value="">
              <div class="title">
                <span>{{  item.title }}</span>
                <i class="el-icon-close close" @click="closeSelectTree(item)"></i>
              </div>
              <div class="treeList">
                <div class="treeSerch">
                  <el-input placeholder="输入关键字进行过滤" v-model="form[item.keyWord]" @input="(value) =>{treeSerch(value,item)}">
                  </el-input>
                </div>
                <!-- :ref="item.treeRef" -->
                <div class="treeStructure">
                    <el-tree :ref="item.treeRef" :filter-node-method="(value, data) => filterNode(value, data, item)"
                      :data="item.treeData.data" node-key="id" :default-expanded-keys="item.treeData.default"
                      :default-checked-keys="item.treeData.checked" :props="item.treeData.props"
                      @node-click="(data, node) => { handleNodeClick(data, node, item, index) }">
                      <template slot-scope="{ node, data }">
                        <div class="treeBox">
                          <span>{{ data[item.treeData.props.label] }}</span>
                          <div v-if="item.choose" class="treeInput" @click.prevent.stop="preventStop">
                            <el-input @input="(value) => { treeInput(value, data, node) }"
                              v-model="data.porgName"></el-input>
                          </div>
                        </div>
                      </template>
                    </el-tree>
                    <div v-if="item.choose" class="treeTitle">参培人数</div>
                  </div>
              </div>
            </el-option>
          </el-select>
        </div>
        <slot name="formTable"></slot>
      </el-form-item>
    </div>
  </div>
</template>

<script>
export default {
  inject: ["disableKeys"],
  props: {
    formConfig: {
      type: Object,
      default: () => {}
    },
    name: {
      type: String,
      default: ""
    },
    form: {
      type: Object
    }
  },
  data() {
    return {
      fileList: [],
      startPickerOptions: {
        disabledDate(time) {
          return time.getTime() + 86400000 < Date.now();
        }
      },
      // 控制时间选择器开始时间不能大于结束时间
      endPickerOptions: {
        disabledDate(time) {
          return time.getTime() + 86400000 < Date.now();
        }
      }
    };
  },
  computed: {
    isDisabled() {
      return function (item) {
        return this.disableKeys.includes(item.prop);
      };
    }
  },
  methods: {
    closeSelectTree(item) {
      console.log(this, "????this");
      this.treeSerch("", item);
      this.$refs[item.ref][0].blur();
    },
    // 组织机构树结构输入事件
    treeSerch(value, item) {
      this.form[item.keyWord] = value;
      this.$refs[item.treeRef][0].filter(value);
    },
    // 组织机构选人数事件
    treeInput(value, data, node) {
      this.$emit("treeInput", value, data, node);
    },
    checkOrgType(orgType, data, node, item) {
      const name = `${item.treeData.props.label}`;
      const value = `${item.treeData.props.value}`;
      let bz = "";
      let dep = "";
      let unit = "";
      let id = "";
      if (item.chooseUnit) {
        if (orgType !== "1") {
          if (orgType === "2") {
            dep = data.orgName;
            id = data.id;
            if (node.parent.data.orgType === "1") {
              unit = node.parent.data.orgName;
            } else {
              dep = `${node.parent.data.orgName}${dep}`;
              if (node.parent.parent.data.orgType === "1") {
                unit = node.parent.parent.data.orgName;
              } else {
                dep = `${node.parent.parent.data.orgName}${dep}`;
                if (node.parent.parent.parent.data.orgType === "1") {
                  unit = node.parent.parent.parent.data.orgName;
                }
              }
            }
          } else if (orgType === "3") {
            console.log(12);
            bz = data.orgName;
            id = data.id;
            if (node.parent.data.orgType === "2") {
              dep = node.parent.data.orgName;
              if (node.parent.parent.data.orgType === "1") {
                unit = node.parent.parent.data.orgName;
              } else {
                dep = `${node.parent.parent.data.orgName}${dep}`;
                if (node.parent.parent.parent.data.orgType === "1") {
                  unit = node.parent.parent.parent.data.orgName;
                } else {
                  dep = `${node.parent.parent.parent.data.orgName}${dep}`;
                  if (node.parent.parent.parent.parent.data.orgType === "1") {
                    unit = node.parent.parent.parent.parent.data.orgName;
                  } else {
                    dep = `${node.parent.parent.parent.parent.data.orgName}${dep}`;
                  }
                }
              }
            } else if (node.parent.data.orgType === "1") {
              unit = node.parent.data.orgName;
            }
          }
        } else {
          unit = data.orgName;
          id = data.id;
        }
      } else {
        if (orgType !== "1") {
          if (orgType === "2") {
            dep = data.orgName;
            id = data.id;
            if (node.parent.data.orgType === "1") {
              unit = node.parent.data.orgName;
            } else {
              dep = `${node.parent.data.orgName}${dep}`;
              if (node.parent.parent.data.orgType === "1") {
                unit = node.parent.parent.data.orgName;
              } else {
                dep = `${node.parent.parent.data.orgName}${dep}`;
                if (node.parent.parent.parent.data.orgType === "1") {
                  unit = node.parent.parent.parent.data.orgName;
                }
              }
            }
          } else if (orgType === "3") {
            console.log(12);
            bz = data.orgName;
            id = data.id;
            if (node.parent.data.orgType === "2") {
              dep = node.parent.data.orgName;
              if (node.parent.parent.data.orgType === "1") {
                unit = node.parent.parent.data.orgName;
              } else {
                dep = `${node.parent.parent.data.orgName}${dep}`;
                if (node.parent.parent.parent.data.orgType === "1") {
                  unit = node.parent.parent.parent.data.orgName;
                } else {
                  dep = `${node.parent.parent.parent.data.orgName}${dep}`;
                  if (node.parent.parent.parent.parent.data.orgType === "1") {
                    unit = node.parent.parent.parent.parent.data.orgName;
                  } else {
                    dep = `${node.parent.parent.parent.parent.data.orgName}${dep}`;
                  }
                }
              }
            } else if (node.parent.data.orgType === "1") {
              unit = node.parent.data.orgName;
            }
          }
        }
      }
      const orgConfig = {
        [name]: `${unit}${dep}${bz}`,
        [value]: id
      };
      return orgConfig;
    },
    // 组织机构点击事件
    handleNodeClick(data, node, item, index) {
      let nowOrgName = "";
      let nowId = "";
      let parentName = "";
      // 配置默认点击事件
      if (item.commonClick) {
        nowOrgName = data[item.treeData.props.label];
        nowId = data[item.treeData.props.value];
        parentName = "";
        if (item.isSplice) {
          const orgConfig = this.checkOrgType(data.orgType, data, node, item);
          if (orgConfig[item.treeData.props.label]) {
            if (item.multiple) {
              if (this.form[item.name].includes(orgConfig[item.treeData.props.value])) return;
              else {
                this.form[item.prop].push(orgConfig[item.treeData.props.label]);
                this.form[item.name].push(orgConfig[item.treeData.props.value]);
              }
            } else {
              this.$set(this.form, `${item.prop}`, orgConfig[item.treeData.props.label]);
              this.$set(this.form, `${item.name}`, orgConfig[item.treeData.props.value]);
            }
          }
        } else {
          // 判断是否是多选
          if (item.multiple) {
            if (nowId !== "") {
              if (this.form[item.name].includes(nowId)) return;
              else {
                this.form[item.prop].push(`${parentName}${nowOrgName}`);
                this.form[item.name].push(nowId);
              }
            }
          } else {
            this.$set(this.form, `${item.prop}`, `${parentName}${nowOrgName}`);
            this.$set(this.form, `${item.name}`, nowId);
          }
        }
        this.$emit("handleNodeClick", item, nowId, index, data, node);
      } else {
        this.$emit("handleNodeClick", data, node, item, index);
      }
      // 配置是否点击后关闭对应弹窗
      if (item.clickClose && nowOrgName) {
        this.closeSelectTree(item);
      }
    },
    // 组织机构过滤筛选
    filterNode(value, data) {
      if (!value) return true;
      if (data.orgName) {
        return data.orgName.indexOf(value) !== -1;
      } else {
        return data.extName.indexOf(value) !== -1;
      }
    },
    // 清空事件
    clearValue(type, item) {
      console.log(type);
      console.log(item);
      switch (type) {
        case "selectTree":
          if (item.multiple) {
            this.form[item.prop] = [];
            this.form[item.name] = [];
          } else {
            this.form[item.prop] = "";
            this.form[item.name] = "";
          }
          break;
        case "select":
          this.form[item.prop] = "";
          this.form[item.name] = "";
          break;
        default:
          this.form[item.prop] = "";
          break;
      }
      console.log(this.form, "???this.form");
    },
    handleupdata(response, file, fileList) {
      // this.$message({
      //   message: "功能开发中",
      //   type: "success"
      // });
      this.$emit("handleupdata", response, file, fileList);
    },
    getResourcesData(type, index) {
      this.$emit("getResourcesData", type, index);
    },
    change(item) { this.$emit("change", item); },
    changeEvent(val, item) {
      const label = [];
      if (item.name) {
        item.options.map(i => {
          if (val instanceof Array) {
            val.map(j => {
              if (j === i.value) {
                label.push(i.label);
              }
              this.form[item.name] = label;
            });
          } else {
            if (val === i.value) {
              this.form[item.name] = i.label;
            }
          }
        });
      }
      this.$emit("changeEvent", val, item);
    },
    // 下拉框多选移出事件
    removeTag(val) {
      this.$emit("removeTag", val);
    },
    // 时间选择事件 双选
    pickerChange(val, item, num) {
      if (num === 1) {
        this.form[item.start] = val;
      } else {
        this.form[item.end] = val;
      }
      this.$emit("pickerChange", val, num);
    },
    // 联级选择器change事件
    handleCascaderChange(val, item) {
      if (item.id) {
        this.form[item.id] = val;
      }
      this.$emit("handleCascaderChange", val, item);
    }
  }
};
</script>

<style lang="less" scoped>
@import "../assets/style/pop-upNotification.less";
.EmergencyList-dialog-form-item {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 16px;
}
:deep.el-form-item {
  margin-right: 0 !important;
  display: flex;
}
/deep/.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
  content: "*";
  color: #f56c6c;
  font-size: 28px;
  position: relative;
  top: 10px;
  line-height: 28px;
}
:deep(.el-textarea__inner) {
  min-height: 80px !important;
  font-family: none;
}
:deep(.el-input-number--small) {
  width: 220px;
}
:deep(.el-form-item) {
  margin-bottom: 15px;
}
.threeInputOrSelcet {
  :deep(.el-input__inner) {
    width: 220px;
  }
  :deep(.el-select) {
    width: 220px;
  }
  .inputAndbtn {
    :deep(.el-input__inner) {
      width: 120px;
    }
  }
}
:deep(.el-input-group__append) {
  background-color: #fff;
}
:deep(.el-input__inner) {
  font-size: 16px !important;
}
.TeamChoose {
  width: 220px;
  height: 32px;
  border: 1px solid #ccc;
  text-decoration: underline;
}
.input_readonly {
  :depp(.el-input--small) {
    display: flex;
    align-items: center;
  }
  :deep(.el-input__inner) {
    font-size: 16px !important;
    border: none !important;
    padding: 0;
    display: flex;
    align-items: center;
  }

  :deep(.el-textarea__inner) {
    font-size: 16px !important;
    border: none !important;
    padding: 0;
    display: flex;
    align-items: center;
  }
}
.flex {
  display: flex;
  align-items: center;
  width: 100%;
}
.timeBox {
  :deep(.el-input--small) {
    width: 150px !important;
  }
}
:deep(.el-form-item__label) {
  padding: 0 8px 0 0;
}
:deep(.el-input__inner) {
  // height: 35px !important;
  min-height: 35px;
  line-height: 35px !important;
}
:deep(.el-form-item__label) {
  padding: 0 8px 0 0;
  height: 35px !important;
  line-height: 35px !important;
}
// }

:deep(.el-input__icon) {
  line-height: 35px !important;
}
::v-deep .el-upload-list__item.is-success.focusing .el-icon-close-tip {
  display: none !important;
}
.buttonNoBorder {
  border: none !important;
  width: 80px !important;
  :deep(.el-button) {
    border: none !important;
    width: 80px !important;
  }
}
.treeBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-right: 40px;
  .treeInput {
    width: 55px;
    padding-left: 10px;
    :deep(.el-input__inner) {
      width: 55px;
      height: 20px;
      line-height: 20px !important;
      min-height: 20px;
      padding: 0 5px;
    }
  }
}
// :deep(.el-cascader-menu:last-child .el-cascader-node, .el-tabs--bottom .el-tabs--left > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom .el-tabs--right > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--border-card > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--card > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top .el-tabs--left > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top .el-tabs--right > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top.el-tabs--border-card > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:last-child) {
//   margin-bottom: 10px !important;
// }
:deep(.el-cascader-node) {
  margin-bottom: 8px !important;
  padding-right: 0px !important;
}
:deep(.el-select-dropdown__wrap) {
  max-height: none;
}

:deep(.el-select-dropdown__list) {
  padding: 1px 0;
}

:deep(.el-select-dropdown__item) {
  height: 300px;
  padding: 0;

  &.is-disabled {
    cursor: default;
  }

  &.selected {
    font-weight: normal;
  }
}

:deep(.el-select-dropdown__item.hover) {
  background-color: transparent;
}

.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  background-color: #5b7df5;
  color: #fff;
  padding: 0 10px;
  font-weight: 700;

  .close {
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
  }
}

.treeList {
  max-height: 280px;
  overflow-y: auto;
  // display: flex;
  // justify-content: space-between;
  // position: relative;
  .treeTitle {
    // float: right;
    width: 65px;
    height: 34px;
    position: absolute;
    top: 30px;
    right: 40px;
    color: #606266;
    background-color: #fff;
    z-index: 999;
  }
  // div {
  //   // padding-right: 30px;
  //   // position: absolute;
  //   // top: -20px;
  // }
}
.treeTitle {
  float: right;
}

.custom-node {
  position: relative;

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
}

.node-icon {
  width: 10px;
  margin-right: 7px;
}

// .node-checked {
//   margin-right: 5px;

// :deep(.el-checkbox__input.is-checked .el-checkbox__inner::after) {
//   border-color: #5B7DF5;
// }
:deep(.el-checkbox__inner:hover) {
  border-color: #5b7df5;
}
:deep(.el-select-dropdown__item) {
  padding: 0 !important;
}
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #fff;
  border-color: #5b7df5;

  &::after {
    border-color: #5b7df5;
  }
}
// }

.node-active {
  text-decoration: underline;
  color: #5b7df5;
}

:deep(.el-select-dropdown__item) {
  padding: 0px !important;
}
:deep(.el-tree-node__children) {
  padding-bottom: 3px;
}
.treeList {
  width: 100%;
  display: flex;
  flex-direction: column;
  .treeSerch {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px 0;
  }
  :deep(.el-input) {
    width: 75% !important;
    height: 30px;
  }
  :deep(.el-input__inner) {
    height: 30px !important;
    min-height: 30px !important;
    line-height: 30px !important;
    &::placeholder {
      // color: red;
      font-size: 14px !important;
    }
  }
}
:deep(.el-tree-node__content) {
  height: 30px;
}
</style>
